<template>
  <div>
      <template><headpage></headpage></template>
      <template><edgeExtendPage></edgeExtendPage></template>
      
      <div style="width:100%;padding-top:60px;"></div>
      <div class="index-head index-page" v-if="newPost.length != 0">
          <div class="index-page-head"><span>最新</span><a  @click="Test" href="javascript:void(0);">更多</a></div>
          <hr />
          <div>
            <ul class="index-ul">
                <li v-for="(item,index) in newPost" v-on:click="JumpPostContent(item)">
                    {{item.title}}
                    <p>
                        {{item.uinfo.name}}
                        {{item.ctime | formatDate}}&nbsp;&nbsp;&nbsp;
                        阅-{{item.read_count}}
                        回-{{item.reply_count}}
                    </p>
                </li>
            </ul>
          </div>
          <div style="text-align: center;"><a href="javascript:void(0)" v-on:click="loadMore">加载更多</a></div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from "axios";
import Head from './childPage/Head'
import EdgeExtend from './childPage/EdgeExtend'
// import Loading from './plug/Loading'
export default {
  components: {
    headpage:Head,
    edgeExtendPage:EdgeExtend
    // loading:Loading
  },
  data () {
      return {
          pageIndex: 1,//第几页
          newPost:[] //最新帖子
      }
  },
  created:function () {
      document.title = '虎绿林';
      if(g.sid){
          this.isLogin = true;
      }
      this.InitData();
  },
  methods:{
      //初始化首页数据
      InitData: function(){
          let self = this;
          this.$lay.loading(1,0);
          axios.all([newPost()]).then(axios.spread(function (res1, res2) {
              //请求成功
              console.log(1)
              self.$lay.loading(-1);
          })).catch(function(e){
              //请求数据出现错误
              console.log(e);
              self.$lay.toast('数据请求出现错误!', 2000);
              self.$lay.loading(-1);
          });
          //最新帖子
          function newPost(){
              self.$http.get('q.php/index.index.json?p='+self.pageIndex+'&_origin=*').then(function(res){
                  if(res.status == 200){
                      let data = res.data;
                      let childForum = data.childForum;//分类
                      let topicList = data.newTopicList; //最新帖子
                      self.newPost = topicList;
                  }
              });
          }
      },
      //加载更多帖子
      loadMore:function(){
          this.$lay.loading(1,0);
          let self = this;
          self.pageIndex++;
          self.$http.get('q.php/index.index.json?p='+self.pageIndex+'&_origin=*').then(function(res){
              if(res.status == 200){
                  let data = res.data;
                  let childForum = data.childForum;//分类
                  let topicList = data.newTopicList; //最新帖子
                  Vue.set(self,'newPost',self.newPost.concat(topicList))
                  self.$lay.loading(-1);
              }
          });
      },
      Test: function(){
          debugger
      },
      //跳转到帖子
      JumpPostContent: function(item){
          console.log(this);
          this.$router.push({
              path: '/post/'+item.topic_id,
              query:{
                  title:item.title
              }
          });
      }
  }
}
</script>
